<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
            name="viewport"
            content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>HELLO，AMAP!</title>
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
    <!-- Core JS  -->
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/js/bootstrap.bundle.min.js"></script>
    <script src="../static/js/svg-injector.min.js"></script>
    <script src="../static/js/feather.min.js"></script>
    <!-- Quick JS -->
    <script src="../static/js/quick-website.js"></script>
</head>
<body>
<button type="button" id="btn">转换地址</button>
<div id="container"></div>

<script type="text/javascript">
    // 声明全局变量
    let lnglat = [];
    let marker; // 用于存储标记点对象

    window._AMapSecurityConfig = {
        securityJsCode: "21816877f086290ef2e5347d8f28dd5a",
    };
</script>
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
    AMapLoader.load({
        key: "2fc429a04b0898c8009edd2f1a4f8013", //申请好的Web端开发者 Key，调用 load 时必填
        version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
    })
        .then((AMap) => {
            const map = new AMap.Map('container', {
                zoom: 10, // 地图显示的缩放级别
                center: [116.404, 39.915] // 初始中心点
            });

            // 监听地图拖拽事件
            map.on('dragend', function() {
                const center = map.getCenter();
                lnglat = [center.lng, center.lat];
                console.log('拖拽后的中心点经纬度:', lnglat);
                console.log(lnglat)
                updateMarker(center);
            });

            AMap.plugin(['AMap.ToolBar'], function() {
                var toolBar = new AMap.ToolBar();
                map.addControl(toolBar);
            });

            AMap.plugin(['AMap.Scale'], function() {
                var scale = new AMap.Scale();
                map.addControl(scale);
            });

            AMap.plugin(['AMap.Geolocation'], function() {
                var geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true, // 是否使用高精度定位，默认：true
                    timeout: 10000, // 设置定位超时时间，默认：无穷大
                    offset: [10, 20],  // 定位按钮的停靠位置的偏移量
                    zoomToAccuracy: true,  //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                    position: 'RB' //  定位按钮的排放位置,  RB表示右下
                });

                map.addControl(geolocation);

                geolocation.getCurrentPosition(function(status, result) {
                    if (status === 'complete') {
                        onComplete(result);
                    } else {
                        onError(result);
                    }
                });

                function onComplete(data) {
                    // data是具体的定位信息
                    console.log(data);
                    // 更新全局变量 lnglat
                    lnglat = [data.position.lng, data.position.lat];
                    console.log(lnglat);
                    updateMarker(new AMap.LngLat(data.position.lng, data.position.lat));
                }

                function onError(data) {
                    // 定位出错
                    console.log(data);
                }
            });

            function updateMarker(center) {
                if (marker) {
                    marker.setMap(null); // 清除旧标记点
                }
                marker = new AMap.Marker({
                    map: map,
                    position: center,
                    title: '当前位置'
                });
            }
        })
        .catch((e) => {
            console.error(e); // 加载错误提示
        });

    $(function () {
        $('#btn').on('click', function (event) {
            event.preventDefault();

            console.log(lnglat);

            AMap.plugin('AMap.Geocoder', function () {
                var geocoder = new AMap.Geocoder({
                    city: '广东',
                    radius: 1000,
                });

                geocoder.getAddress(lnglat, function (status, result) {
                    if (status === 'complete' && result.info === 'OK') {
                        console.log(result);
                        geocoder_CallBack(result);
                    }
                });
            });
        });
    });

    function geocoder_CallBack(result) {
        // 处理回调结果
        console.log('回调结果:', result.regeocode.formattedAddress);
    }
</script>
</body>
</html>
